<template>
	<view class="app-information-index"  :style="[AppSkinVar]">
		<view class="app-information-index__header fixed-top bg-white">
			<view class="e-p-l-20 e-p-r-20">
				<view class="app-information-index__header-search e-flex-xy-center" @tap="$goTo('/pages/information/search')">
					<e-icon name="search" size="32rpx"></e-icon>
					<text class="e-p-l-16 c-secondary">{{$t('nearby.搜索')}}</text>
				</view>
			</view>
			<scroll-view class="white-nowrap"  scroll-x="true" >
				<view class="e-flex e-p-l-20 e-p-t-30 e-p-b-30">
					<view
						class="app-information-index__classify "
						:class="[classifyId === -1 && 'is-active fw-500']"
						@tap="classifyId = -1"
					>
					<view class="app-information-index__classify-box e-flex-xy-center">
						<text class="white-nowrap">{{ $t('common.全部') }}</text>
					</view>
						
					</view>
					<view
						class="app-information-index__classify e-flex-xy-center"
						:class="[classifyId === item.id && 'is-active fw-500']"
						v-for="(item, index) in classifyList"
						:key="item.id"
						@tap="classifyId = item.id"
					>
						<text class="white-nowrap">{{ item.name }}</text>
					</view>
					<view class="img-20 e-p-r-5"></view>
				</view>
			</scroll-view>
		</view>
		<view class="e-p-l-20 e-p-r-20">
			<view @tap="$goTo('/pages/information/info',{id:item.id})" v-for="(item, index) in list" :key="item.id">
				<information-item
					:info="item"
					:option="itemOption"
					imgStyle="border-radius:20rpx;"
					:top="index  % 4 === 0"
				></information-item>
				
			</view>
			<empty  v-if="isEmpty"></empty>
			<load-more v-else :showLoad="showLoad"></load-more>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import {ref,computed,watch,nextTick} from 'vue'
	import { useQueryPage } from '@/common/hooks';
	import { getInformationList,getInformationClassifyList } from '@/common/request/api';
	import { onLoad,onReachBottom } from '@dcloudio/uni-app';
	import InformationItem from '@/components/list/child/informationItem.vue';
	
	const classifyId = ref(-1)
	const classifyList = ref([])
	const requestParams = computed(() => {
		return {
			categoryId:classifyId.value === -1 ? undefined : classifyId.value
		}
	})
	const itemOption = {
			itemTitleShow:true,
			itemTitleColor: 'rgba(51, 51, 51, 1)',
			sourceShow: true,
			sourceColor: 'rgba(153, 153, 153, 1)',
			readingShow: true,
			readingColor: 'rgba(153, 153, 153, 1)'
		}
	

	const { isEmpty,showLoad, list, handleQueryPage, handleRefresh } = useQueryPage({
		api: getInformationList,
		option: {
			params: requestParams,
			responseKey:'data.rows',
			totalKey:'data.total',
		}
	});
	watch(classifyId,() => {
		nextTick(() => {
			handleRefresh()
		})
	})
	
	onLoad(() => {
		getInformationClassifyList({isPage:false}).then(res => {
			classifyList.value = res.data.rows;
		})
		handleRefresh()
	})
	onReachBottom(() => {
		handleQueryPage()
	})
	
</script>
<style lang="scss">
	page{
		background-color: $base-color-white;
	}
</style>
<style lang="scss" scoped>
	@include appBem_b(information-index){
		padding-top:192rpx;
		@include appBem_e(header){
			height:192rpx;
			&-search{
				height: 72rpx;
				background-color: #F7F7F7;
				border-radius: 36rpx;
			}
		}
		@include appBem_e(classify){
			background-color: #F2F2F2;
			border-radius: 30rpx;
			padding:0 20rpx;
			margin-right:20rpx;
			&-box{
				min-width: 76rpx;
				height: 60rpx;
			}
		
			@include appWhen(active){
				color:$base-color-white;
				background-color: var(--color-primary);;
			}
		}
	}
</style>